<template>
  <div class="wrapper">
    <!-- header部分 -->
    <header>
      <p class="back" @click="toPerson">
        <i class="fa fa-angle-left"></i>
      </p>
      <p class="font">积分商城</p>
    </header>
    <!-- 个人信息部分 -->
    <div class="content">
      <div class="text" v-show="this.$getSessionStorage('user')">
        <span><img src="../assets/wyz.jpg"></span>
        <span class="info">{{ user.userName }}，您好！</span>
        <span class="member">
          <img src="../assets/silver.png" v-show="user.memLevel === 0">
          <img src="../assets/gold.png" v-show="user.memLevel === 1">
          <img src="../assets/pt.png" v-show="user.memLevel === 2">
          <img src="../assets/diamond.png" v-show="user.memLevel === 3">
          <img src="../assets/blackdiamond.png" v-show="user.memLevel === 4">
        </span>
        <div class="point">
          <img src="../assets/bean.png">
          <span> {{ user.points }}</span>
        </div>
      </div>
    </div>
    <!-- 兑换区域 -->
    <div class="exchange">
      <div class="info">
        <div class="gifts">
          <h4>优惠券兑换</h4>
          <ul class="gifttype">
            <li @click="buy(coupon[0].points, coupon[0].typeId)">
              <img src="../assets/coupons1.png">
              <p>￥30减￥6券</p>
              <p class="price"><img src="../assets/bean.png">{{ coupon[0].points }}</p>
            </li>
            <li @click="buy(coupon[1].points, coupon[1].typeId)">
              <img src="../assets/coupons2.png">
              <p>￥25减￥6券</p>
              <p class="price"><img src="../assets/bean.png">{{ coupon[1].points }}</p>
            </li>
            <li @click="buy(coupon[2].points, coupon[2].typeId)">
              <img src="../assets/coupons3.png">
              <p>￥45减￥8券</p>
              <p class="price"><img src="../assets/bean.png">{{ coupon[2].points }}</p>
            </li>
            <li @click="buy(coupon[3].points, coupon[3].typeId)">
              <img src="../assets/coupons4.png">
              <p>￥35减￥8券</p>
              <p class="price"><img src="../assets/bean.png">{{ coupon[3].points }}</p>
            </li>
            <li @click="buy(coupon[4].points, coupon[4].typeId)">
              <img src="../assets/coupons5.png">
              <p>￥50减￥10券</p>
              <p class="price"><img src="../assets/bean.png">{{ coupon[4].points }}</p>
            </li>
            <li @click="buy(coupon[5].points, coupon[5].typeId)">
              <img src="../assets/coupons6.png">
              <p>￥45减￥10券</p>
              <p class="price"><img src="../assets/bean.png">{{ coupon[5].points }}</p>
            </li>
            <li @click="buy(coupon[6].points, coupon[6].typeId)">
              <img src="../assets/coupons7.png">
              <p>￥50减￥12券</p>
              <p class="price"><img src="../assets/bean.png">{{ coupon[6].points }}</p>
            </li>
            <li @click="buy(coupon[7].points, coupon[7].typeId)">
              <img src="../assets/coupons8.png">
              <p>￥35减￥12券</p>
              <p class="price"><img src="../assets/bean.png">{{ coupon[7].points }}</p>
            </li>
            <li @click="buy(coupon[8].points, coupon[8].typeId)">
              <img src="../assets/coupons9.png">
              <p>￥50减￥20券</p>
              <p class="price"><img src="../assets/bean.png">{{ coupon[8].points }}</p>
            </li>
            <li @click="buy(coupon[9].points, coupon[9].typeId)">
              <img src="../assets/coupons10.png">
              <p>￥35减￥20券</p>
              <p class="price"><img src="../assets/bean.png">{{ coupon[9].points }}</p>
            </li>
          </ul>
        </div>
        <!-- 礼品兑换区域 -->
        <div class="gifts">
          <h4>礼品兑换
          </h4>
          <ul class="gifttype">
            <li @click="purchase(299)">
              <img src="../assets/gifts1.jpg">
              <p>多头充电线</p>
              <p class="price"><img src="../assets/bean.png"> 299</p>
            </li>
            <li @click="purchase(299)">
              <img src="../assets/gifts2.jpg">
              <p>智能手环</p>
              <p class="price"><img src="../assets/bean.png"> 299</p>
            </li>
            <li @click="purchase(299)">
              <img src="../assets/gifts3.jpg">
              <p>优质大米</p>
              <p class="price"><img src="../assets/bean.png"> 299</p>
            </li>
            <li @click="purchase(299)">
              <img src="../assets/gifts4.jpg">
              <p>魔爪饮料</p>
              <p class="price"><img src="../assets/bean.png"> 299</p>
            </li>
            <li @click="purchase(299)">
              <img src="../assets/gifts5.jpg">
              <p>百乐圆珠笔</p>
              <p class="price"><img src="../assets/bean.png"> 299</p>
            </li>
            <li @click="purchase(299)">
              <img src="../assets/gifts6.jpg">
              <p>汉堡王套餐</p>
              <p class="price"><img src="../assets/bean.png"> 299</p>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <!-- 底部菜单部分 -->
    <Footer></Footer>
  </div>
</template>

<script>
import Footer from '../components/Footer.vue';
export default {
  name: 'Mall',
  data() {
    return {
      userId: this.$route.query.userId,
      user: this.$getSessionStorage('user'),
      coupon: []
    }
  },
  created() {
    this.$axios.get('coupons'
    ).then(response => {
      console.log(response)
      this.coupon = response.data
      // console.log(this.coupon[0].typeId)
    }).catch(error => {
      console.error(error);
    });
  },
  methods: {
    toPerson() {
      this.$router.push('/person')
    },
    purchase(price) {
      alert('您确定兑换吗？')
      if (this.user.points >= price) {
        //向后端更改数据
        const user = {
          userId: this.user.userId,
          points: price
        };
        this.$axios.put('users/points', user, {
          params: {
            token: this.$getSessionStorage("token"),
          }
        }).then(response => {
          console.log("进来了111111");
          if (response.data) {
            alert('兑换成功！')
            this.user.points -= price
            // 在这里进行其他操作或界面更新
            this.$axios.get('users', {
              params: {
                userId: this.userId,
                password: this.password,
                token: this.$getSessionStorage('token'),
              }
            }).then(response => {
              console.log("进来了");
              console.log(response);
              this.$setSessionStorage('user', response.data)
            }).catch(error => {
              console.error(error);
            });
          } else {
            alert('Failed to update order state');
          }
        }).catch(error => {
          console.error(error);
        });
      } else {
        alert('吃货豆余额不足，兑换失败！\n请下单获取更多吃货豆！')
      }
    },
    buy(price, typeId) {
      // console.log(typeId, this.$getSessionStorage('user').userId);
      alert('您确定兑换吗？')
      if (this.user.points >= price) {
        //向后端更改数据
        const usercoupon = {
          userId: this.user.userId,
          typeId: typeId,
        };
        this.$axios.put('userCoupons', usercoupon, {
          params: {
            token: this.$getSessionStorage('token')
          }
        }
        ).then(response => {
          console.log(response.data);
          if (response.data == "ok") {
            this.$axios.get('users', {
              params: {
                userId: this.$getSessionStorage('user').userId,
                password: this.$getSessionStorage('user').password,
                token: this.$getSessionStorage("token")
              }
            }).then(response => {
              console.log(response);
              this.$setSessionStorage('user', response.data)
            }).catch(error => {
              console.error(error);
            });
            alert('兑换成功！')
            location.reload();

            // 在这里进行其他操作或界面更新
            this.$axios.get(`users`, {
              params: {
                userId: this.user.userId,
                password: this.user.password,
                token: this.$getSessionStorage("token")
              }
            }).then(response => {
              console.log(response.data);
              this.$setSessionStorage('user', response.data)
            }).catch(error => {
              console.error(error);
            });
          } else {
            alert('Failed to update order state');
          }
        }).catch(error => {
          console.error(error);
        });
      } else {
        alert('吃货豆余额不足，兑换失败！\n请下单获取更多吃货豆！')
      }
    }
  },
  components: {
    Footer
  }
}
</script>

<style scoped>
/*********** 总容器 ***********/
.wrapper {
  width: 100%;
  height: 100%;
  background: rgb(240, 240, 240);
}

/*********** header部分 ***********/
.wrapper header {
  width: 100%;
  height: 12vw;
  background-color: #0097ff;
  color: #fff;
  font-size: 4.8vw;

  position: fixed;
  left: 0;
  top: 0;
  /* 提高层次 */
  z-index: 1000;

  display: flex;
  /* justify-content: space-around; */
  align-items: center;
}

.wrapper header .back {
  margin: 0 2vw 0 3vw;
  font-weight: 700;
  font-size: 6vw;
  user-select: none;
  cursor: pointer;
}

/* 个人信息部分 */
.wrapper .content {
  width: 100%;
  margin-top: 12vw;
  background-color: #fff;

}

.wrapper .content .text {
  width: 100%;
  box-sizing: border-box;
  padding: 2vw 5vw;
  border-bottom: solid 1px #ddd;
  user-select: none;
  cursor: pointer;

  display: flex;
  align-items: center;
}

.wrapper .content .text .info {
  font-size: 5vw;
  position: absolute;
  top: 18vw;
  right: 32vw;
  z-index: 1;
}

.wrapper .content .text .member {
  position: absolute;
  top: 26vw;
  right: 45vw;
  z-index: 1;
}

.wrapper .content .text .member img {
  height: 8vw;
  width: 20vw;
}

.wrapper .content .text .point span {
  position: absolute;
  top: 27.5vw;
  right: 25vw;
  z-index: 1;
  font-weight: 600;
  color: orange;
}

.wrapper .content .text .point img {
  height: 5vw;
  width: 5vw;

  position: absolute;
  top: 27.8vw;
  right: 37vw;
  z-index: 1;
}

.wrapper .content .text span img {
  width: 20vw;
  height: 20vw;
  margin-right: 5vw;
  border-radius: 50%;
}

/*********** 兑换区域 ***********/
.wrapper .exchange {
  margin-top: 5vw;
  padding-bottom: 18vw;
  background: rgb(240, 240, 240);
}


/* 礼品兑换区域 */
.wrapper .exchange .gifts h4 {
  margin: 5vw 0 2vw 0;
  text-align: center;
  font-weight: 700;
  color: #666;
}

.wrapper .exchange .info .gifttype {
  width: 100%;

  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-content: center;
}

.wrapper .exchange .info .gifttype li {
  width: 42%;
  margin-left: 3vw;
  margin: 3vw 0 0 0;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  user-select: none;
  cursor: pointer;
}

.wrapper .exchange .info .gifttype li img {
  width: 40vw;
  height: 40vw;
  border-radius: 20px;
}

.wrapper .exchange .info .gifttype li p {
  margin-top: 1vw;
  font-size: 4vw;
  color: #666;
  text-align: center;
}

.wrapper .exchange .info .gifttype li .price {
  color: orange;
  font-weight: 600;
  text-align: center;
}

.wrapper .exchange .info .gifttype li p img {
  height: 5vw;
  width: 5vw;

}
</style>